<template>
    <div style="background: #fff;min-height: 100vh;">
        <div style="z-index: 1;height: 100vh;overflow: scroll;">
            <div style="background-color: #FF8021;height: 120px;">
                <div style="display: flex;justify-content: space-between;padding:10px 10px;">
                    <img @click="returnBcak" style="width: 10px;margin-left: -1px;margin-top: 0px;" src="../assets/img/common-icon-ArrowLeftWhite.svg" alt="">
                    <img src="../assets/img/home-img-taobaoTianmao.svg" alt="">
                    <div style="font-size: 14px;color: #fff;" @click="usergrade">
                        <span>返佣教程</span>
                        <img style="margin-top: 1px;" src="../assets/img/common-icon-moreWhite.svg" alt="">
                    </div>
                </div>
                <div style="margin-top: 20px;padding:0 10px;position: relative;" @click="jumpSearch">
                    <img style="position: absolute;left:22px;top: 9px;" src="../assets/img/common-icon-search.svg" alt="">
                    <input type="text" class="iptSty" placeholder="输入宝贝名称或关键词">
                    <button class="btn1">搜索</button>
                </div>       
            </div>
            <div style="background: #EDEDED;padding:10px;">
                <div style="font-size: 16px;font-weight: bold;margin:10px 0 20px 0;">猜你喜欢</div>
                <productList @proId="getProId" @numId="getNumId" :urlPathVal="indexUrl" :dataList="objVla"></productList>
            </div>
        </div>
        <div v-if="showDetail" style="position: absolute;top:0;z-index: 1000;width: 100%;">
            <detailsPage @getShow="getShow" :tranmitId="proId" :typeShop="typeShop"></detailsPage>
        </div>
        <div v-if="creatShareShow" style="position: fixed;top:0;z-index: 1000;width: 100%;">
            <creatShare :numId="numId" @returnPage="returnCurrentPage"></creatShare>
        </div>
    </div>
  </template>
  
  <script>
    import detailsPage from './public/detailsPage.vue';
    import productList from './public/productList.vue';
    import creatShare from './creatShare.vue';
  export default {
    name: 'taobaoListPage',
    data () {
      return {
        indexUrl:"index",
        proId:"",
        typeShop:'taobao',
        objVla:{
            search:"",
            sort:""
        },
        showDetail:false,
        numId:'',
        creatShareShow:false
      }
    },
    components: {  
        productList,
        detailsPage,
        creatShare
    },
    
    mounted() {
        // this.listenerBackbutton();
        window.addEventListener('setItem', (e) => {
            if(e.key == 'returnVal' && e.newValue == 'true'){
                this.showDetail = false;
                this.creatShareShow = false;
            }
        });
    },
    methods: {
        returnCurrentPage(data){
            this.creatShareShow = data;
        },
        getNumId(data){
            this.numId = data;
            this.creatShareShow = true;
        },
        //从详情页返回
        getShow(data){
            this.showDetail = data;
        },
        //获取商品id
        getProId(data){
            this.proId = data;
            this.showDetail = true;
        },
        jumpSearch(){
            this.$router.push('/searchPage');
        },
        returnBcak(){
            this.$router.go(-1);
        },
        usergrade(){
            this.$router.push('/usergrade');
        }
    },
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
      .iptSty{
          height: 40px;
          line-height: 40px;
          padding-left:40px;
          background-color: #fff;
          border-radius: 20px;
          width:100%;
          border:none;
          box-sizing: border-box;
      }
      input::placeholder{
          color: #888;
          font-weight: 400;
      }
      .btn1{
          position: absolute;
          right:10px;
          top:0;
          background-color: #FFE842;
          border-radius: 20px;
          font-size: 14px;
          color:#B34C00;
          border:none;
          padding:0 22px;
          height: 40px;
          line-height: 40px;
      }
  </style>
  